// 弹出检测单位

<template>
    <van-popup
        v-model="visible"
        position="bottom"
        class="popup-bg"
        get-container="body"
        :style="{ height: '80%' }"
    >
        <div class="btn">
            <div @click="fnColse" class="cancle">取消</div>
            <div @click="fnSave" class="confirm">确定</div>
        </div>
        <div class="search-box">
            <van-search
                v-model="keyWord"
                @search="searchPart"
                shape="round"
                background="#1990ff"
                placeholder="请输入检测单位名称"
            />
        </div>
        <div class="radio-list">
            <van-radio-group v-model="result">
                <van-cell-group>
                    <van-cell
                        v-for="(item, index) in enterpriseList"
                        clickable
                        :key="index"
                        :title="item.name"
                    >
                        <template #right-icon>
                            <van-radio :name="item.code" ref="radioboxes" />
                        </template>
                    </van-cell>
                </van-cell-group>
            </van-radio-group>
        </div>
    </van-popup>
</template>

<script>
export default {
    props: {
        value: {
            type: Boolean,
            default: false,
            required: true,
        },
        enterpriseList: {
            type: Array,
            default: () => {
                return []
            },
        },
        // 操作后自动关闭组件
        autoClose: {
            type: Boolean,
            default: true,
        },
    },
    computed: {
        visible: {
            get() {
                return this.value
            },
            set(val) {
                this.$emit('input', val)
            },
        },
    },
    data() {
        return {
            keyWord: '',
            result: '',
        }
    },
    created() {},
    methods: {
        // 关闭组件
        fnColse() {
            this.visible = false
        },
        // 提交
        fnSave() {
            this.autoClose && this.fnColse()
            this.$emit('save', this.result)
        },
        searchPart() {
            this.$emit('search', this.keyWord)
        },
    },
}
</script>
<style lang="less" scoped>
@deep: ~'>>>';
.search-box {
    display: flex;
    align-items: center;
    background-color: #ebedf0;
    position: relative;
    height: 51px;

    @{deep}.searchbar {
        flex: 1;
        font-size: 16px;
        height: 35px;
        border-radius: 35px;
        overflow: hidden;
        margin-left: 16px;

        input[type='search'] {
            font-size: 16px;
            padding-left: 50px;
        }
    }

    > span {
        flex-shrink: 0;
        padding: 10px;
        width: 17px;
        height: 17px;
        background: url('../../../assets/img/search.png') no-repeat center /
            17px;
    }
}
.popup-bg {
    width: 100%;
    .btn {
        display: flex;
        justify-content: space-between;
        height: 51px;
    }
    /deep/ .van-checkbox-group {
        height: calc(100% - 51px);
        overflow: auto;
    }
    .cancle {
        padding: 15px 0px 15px 18px;
        font-size: 14px;
        font-weight: 600;
    }
    .confirm {
        padding: 15px 18px 15px 0px;
        font-size: 14px;
        font-weight: 600;
    }
    .popup {
        position: absolute;
        bottom: 0;
        left: 0;
        z-index: 100;
        width: 100%;
        height: 400px;
        overflow: auto;
        border-top-left-radius: 8px;
        border-top-right-radius: 8px;
        background: #fff;
    }
    .item {
        padding: 0 15px;
        width: 100%;
        height: 40px;
        line-height: 40px;
        border-bottom: 1px solid #f7f8f9;
        display: flex;
        justify-content: space-between;
        align-items: center;
    }
    .selected {
        width: 16px;
        height: 16px;
        background-size: 16px auto;
    }
    .radio-list {
        height: calc(100% - 110px);
        overflow-y: auto;
    }
}
</style>
